<template>
    <div class="setup">
        <div class="header">
            <div class="image2">设置</div>
            <div>
                <el-row class="tac">
                <el-col :span="24">
                    <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    >
                    <el-menu-item index="1" @click="jump(1)">
                        <i class="el-icon-download"></i>
                        <span slot="title">下载设置</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="jump(2)">
                        <i class="el-icon-user"></i>
                        <span slot="title">隐私设置与安全性</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="jump(3)">
                        <i class="el-icon-chat-line-square"></i>
                        <span slot="title">弹窗设置</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="jump(4)">
                        <i class="el-icon-s-ticket"></i>
                        <span slot="title">插件管理</span>
                    </el-menu-item>
                    <el-menu-item index="5" @click="jump(5)">
                        <i class="el-icon-setting"></i>
                        <span slot="title">其他设置</span>
                    </el-menu-item>
                    </el-menu>
                </el-col>
                </el-row>
            </div>
        </div>
        <div class="main">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        jump(index){
            switch (index) {
                case 1:
                    this.$router.replace('/download');
                    break;
                case 2:
                    this.$router.replace('/safe');
                    break;
                case 3:
                    this.$router.replace('/popup');
                    break;
                case 4:
                    this.$router.replace('/plupinunit');
                    break;
                case 5:
                    this.$router.replace('/other');
                    break;
            }
        }
    }
};
</script>

<style scoped>
@import "../assets/css/body.css";
.setup{
    /* background-image: url('../assets/image/设置页面背景.png');
    background-size: cover;
    background-repeat: no-repeat; */
    height: 100%;
    width: 100%;
}
.header{
    height: 99vh;
    width: 200px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    display: inline-block;
    background-color: white;
}
.image1{
    float: left;
    margin-right: 5px;
}
.image2{
    font-size: 200%;
    float: left;
    font-weight: 1000;
    margin-top: 7px;
    margin-left: 25px;
}
.main{
    display: inline-block;
    vertical-align: top;
    height: 99vh;
    width: 700px;
    margin-left: 200px;
}
</style>